<template>
  <div class="filter-list">
    <div v-for="(item, index) in filterList" :key="index" class="filter-item">
      <div style="display:flex;">
        <el-select v-model="item.top" class="filter-120 strong paddingdiy" name="filterTop" popper-class="global-select-down" size="small" @change="changeTop(item)">
          <!-- 报表下拉 -->
          <el-option
            v-for="opt in topOptions"
            :key="opt.id"
            :label="opt.name"
            :value="opt.id"
            :disabled="openLimit?false:(currentTop !== '' && (opt.id !== null && opt.id !== currentTop) && filterList.length > 1)" />
          <!-- 系统数据下拉 -->
          <el-option
            v-for="opt in systemConditionOptions.condition"
            :key="opt.id"
            :label="opt.name"
            :value="opt.id"
            :disabled="openLimit?false:(currentTop !== '' && (opt.id !== null && opt.id !== currentTop) && filterList.length > 1)" />
        </el-select>
        <!-- 报表类 -->
        <template v-if="item.top === 0">
          <el-select v-model="item.type" class="filter-120 strong" popper-class="global-select-down" name="filterType" size="small" @change="changeSelectType(item)">
            <el-option
              v-for="opt in typeOptions"
              :key="opt.id"
              :label="opt.name"
              :value="opt.id" />
          </el-select>
          <!-- 条件筛选 -->
          <template v-if="item.type === 1">
            <el-select
              v-model="item.field"
              class="filter-120"
              size="small"
              name="filterField"
              popper-class="global-select-down"
              @change="changeSelectCondition($event, item)">
              <!--<el-option label="请选择" value="" />-->
              <el-option
                v-for="opt in conditionOptions"
                :key="opt.name"
                :label="opt.name"
                :value="opt.name" />
            </el-select>
            <el-select v-model="item.operation" popper-class="global-select-down" class="filter-80" name="filterField" size="small" @change="sendData()">
              <!--<el-option label="请选择" value="" />-->
              <el-option
                v-for="opt in mathOperationOptions"
                :key="opt"
                :label="opt"
                :value="opt" />
            </el-select>
            <el-select v-model="item.conditionValue" multiple collapse-tags popper-class="global-select-down" class="filter-170" size="small" name="filterField" @change="conditionValueChange($event, item)">
              <!-- <el-option label="请选择" value="" /> -->
              <el-option
                v-for="opt in item.conditionChilderOptions"
                :key="opt.id"
                :label="opt.name"
                :value="opt.id" />
            </el-select>
          </template>
          <!-- 文本筛选 -->
          <template v-if="item.type === 2">
            <el-select v-model="item.field" class="filter-120" popper-class="global-select-down" name="filterField" size="small" @change="sendData()">
              <!--<el-option label="请选择" value="" />-->
              <el-option
                v-for="item in textOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name" />
            </el-select>
            <el-input
              v-if="isFilterReport && item.field === '报表字段'"
              v-model="item.reportField"
              maxlength="200"
              size="small"
              placeholder="请输入字段"
              type="text"
              class="input-filter-100"
              @change="sendData(true)" />
            <!-- 如果报表字段reportField是时间字段就不显示这个逻辑 -->
            <template v-if="!isTimeField({field: item.reportField || ''})">
              <el-select v-model="item.operation" class="filter-80" popper-class="global-select-down" name="filterField" size="small" @change="sendData(true)">
                <!--<el-option label="请选择" value="" />-->
                <el-option
                  v-for="item in textOperationOptions"
                  :key="item"
                  :label="item"
                  :value="item" />
              </el-select>
              <el-input v-model="item.value" maxlength="200" placeholder="多个条件，使用“,”隔开" type="text" size="small" class="filter-170" @change="sendData(true)" />
            </template>
          </template>
          <!-- 时间筛选 -->
          <!-- 报表筛选类型是时间 或者 如果报表字段reportField是时间字段就显示这个逻辑 -->
          <template v-if="item.type === 0 || isTimeField({field: item.reportField || ''})">
            <div style="display:flex;">
              <!-- 选择时间 -->
              <el-select v-model="item.timeRangeType" class="width70 strong" popper-class="global-select-down" name="filterType" size="small" @change="timeRangeTypeChange(item)">
                <el-option
                  v-for="opt in timeRangeTypeOptions"
                  :key="opt.id"
                  :label="opt.name"
                  :value="opt.id"
                />
              </el-select>
              <el-date-picker
                v-if="!item.timeRangeType"
                v-model="item.timerange"
                :clearable="true"
                :editable="false"
                :default-time="['00:00:00', '23:59:59']"
                class="type-time"
                size="small"
                type="datetimerange"
                format="yyyy/MM/dd HH:mm"
                placeholder="开始日期"
                value-format="timestamp"
                @change="timeChange($event, item)" />
            </div>
          </template>
        </template>
        <!-- 系统类 -->
        <template v-else-if="item.top !== null">
          <!-- 字段选择 -->
          <el-select v-if="systemConditionOptions" v-model="item.field" class="filter-120" popper-class="global-select-down" size="small" name="filterField" @change="changeField(item)">
            <el-option
              v-for="opt in item.systemSecondcondition || []"
              :key="opt.name"
              :label="opt.name"
              :value="opt.name" />
          </el-select>
          <!-- 如果是时间筛选则不展示运算符-->
          <el-select v-if="systemConditionOptions && !isTimeField(item)" v-model="item.operation" popper-class="global-select-down" size="small" class="filter-80" name="filterField" @change="sendData()">
            <!--<el-option label="请选择" value="" />-->
            <template v-for="opt in systemConditionOptions.mathOptions">
              <el-option
                v-if="!(isNumberField(item) && (opt === '包含' || opt === '不包含'))"
                :key="opt"
                :label="opt"
                :value="opt" />
            </template>
          </el-select>
          <!-- 根据不同的字段类型选择内容 -->
          <selectSystemField
            :item="item"
            :system-condition-options="systemConditionOptions"
            :time-range-type-options="timeRangeTypeOptions"
            :link-children="true"
            @timeRangeTypeChange="timeRangeTypeChange"
            @timeChange="timeChange"
            @sendData="sendData" />
          <!-- 筛选按钮，系统筛选才有 -->
          <div v-if="isFilter && item.field" :class="{'active': item.isOpenFilter}" class="filter-icon-btn" @click="switchFilter(item)">
            筛选<i class="el-icon-s-operation icon"/>
          </div>
        </template>
        <div v-if="filterList.length > 1" class="delete-btn bold" @click="deleteItem(index)">删除</div>
        <div v-if="index === 0" class="button-text bold" @click="addItem">添加</div>
      </div>
      <!-- 筛选 -->
      <div v-if="isFilter && item.isOpenFilter && item.top !== 0" class="default-filter-value">
        <div class="label" style="color: #666">默认筛选条件：</div>
        <!-- 根据不同的字段类型选择内容 -->
        <selectSystemField
          :item="item"
          :time-range-type-options="timeRangeTypeOptions"
          :system-condition-options="systemConditionOptions"
          :link-children="true"
          mode="default"
          @timeRangeTypeChange="timeRangeTypeChange"
          @timeChange="timeChange"
          @sendData="sendData" />
      </div>
      <!-- 同比和环比 -->
      <div v-if="isTimeField(item) && item.top !== 0 && isContrast && (item.timeRangeType || (item.isOpenFilter && item.defaultMath)) && contrastSelectShow(item, index)" class="time-month-year">
        <el-checkbox v-model="item.monthOnMonth">
          <span class="contrast-title">环比</span>
          <span class="contrast-content">{{ contentFilter(item.timeRangeType || item.defaultMath).month }}</span>
        </el-checkbox>
        <el-checkbox
          v-if="(item.timeRangeType && item.timeRangeType !== 'year' && item.timeRangeType !== 'week'&& item.timeRangeType !== 'lastweek'&& item.timeRangeType !== 'lastyear') ||
          (!item.timeRangeType && item.defaultMath !== 'year' && item.defaultMath !== 'week'&& item.defaultMath !== 'lastweek'&& item.defaultMath !== 'lastyear')"
          v-model="item.yearOnYear">
          <span class="contrast-title">同比</span>
          <span class="contrast-content">{{ contentFilter(item.timeRangeType || item.defaultMath).year }}</span>
        </el-checkbox>
      </div>
    </div>
  </div>
</template>
<script>
// 数据筛选组件
import { getOptions, getOptionsData } from '@/api/reportManage';
import addIcon from '@/assets/reportManage/add_icon.png';
// tool
import toolMixin from './mixins/toolMethods';
// components
import selectSystemField from './selectSystemField';

export default {
  name: 'ReportDataFilter',
  components: { selectSystemField },
  mixins: [toolMixin],
  props: {
    isFilter: {
      type: Boolean,
      default: true
    },
    paramsType: {
      type: String,
      default: ''
    },
    uuid: {
      type: String,
      default: ''
    },
    isContrast: {
      type: Boolean,
      default: false
    },
    openLimit: {
      type: Boolean,
      default: false
    },
    isFilterReport: { // 是否开启筛选报表字段
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addIcon,
      topOptions: [
        { id: null, name: '无' },
        { id: 0, name: '报表' }
      ],
      timeRangeTypeOptions: [
        { id: '', name: '等于' },
        { id: 'day', name: '今日' },
        { id: 'yesterday', name: '昨日' },
        { id: 'week', name: '本周' },
        { id: 'lastweek', name: '上周' },
        { id: 'month', name: '本月' },
        { id: 'lastmonth', name: '上月' },
        { id: 'year', name: '本年' },
        { id: 'lastyear', name: '去年' }
      ],
      currentTop: '',
      typeOptions: [ // 类型选项
        { id: '', name: '无' },
        { id: 0, name: '时间筛选' },
        { id: 1, name: '条件筛选' },
        { id: 2, name: '文本筛选' }
      ],
      conditionOptions: [],
      mathOperationOptions: [], // 数学操作符合

      textOptions: [],
      textOperationOptions: [],
      filterList: [
        {
          top: '', // 0：报表 1：系统
          timerange: [],
          numberRange: [],
          timeRangeType: '',
          monthOnMonth: false,
          yearOnYear: false,
          type: '', // 0:时间筛选 1:条件筛选 2:文本筛选
          begin: '',
          end: '',
          field: '',
          operation: '', // 操作，=,>,<,>=,<= 和 包含，不包含，首字
          value: '',
          conditionValue: '',
          reportField: '', // 【v2.8.9】报表字段（手动输入）,当选择的字段为报表字段时才生效
          isOpenFilter: false, // 是否开启筛选
          defaultMath: '', // 默认筛选的运算条件
          defaultValue: '', // 默认筛选条件
          defaultNumberRange: [], // 默认筛选条件
          defaultTimeRange: [] // 默认筛选条件
        }
      ],
      systemConditionOptions: {
        condition: []
      },
      filterListGroup: {
        system: [], // 系统
        report: [] // 报表
      }
    };
  },
  watch: {
    isContrast: function(newV, oldV) {
      if (!newV && this.filterList.length > 0) {
        this.filterList.forEach(i => {
          i.monthOnMonth = false;
          i.yearOnYear = false;
        });
      }
    }
  },
  created() {
    this.getOpt();
    this.getOptionsData();
  },
  methods: {
    /**
     * 获取数据
     */
    // 获取系统筛选相关下拉选项
    async getOptionsData() {
      try {
        const res = await getOptionsData();
        if (res.data) {
          this.systemConditionOptions = res.data.conditionOptions;
          this.filterList.forEach(i => {
            this.setYystemSecondcondition(i);
          });
        }
      } catch (error) {
        console.error(error);
      }
    },
    // 获取报表筛选相关下拉选项
    async getOpt() {
      try {
        const res = await getOptions();
        if (res.data) {
          if (res.data.conditionOptions) {
            this.conditionOptions = res.data.conditionOptions.condition;
          }
          if (res.data.textOptions) {
            const hasReportFilter = res.data.textOptions.condition.some(i => i.name === '报表字段');
            if (!hasReportFilter && this.isFilterReport) {
              res.data.textOptions.condition.push({ name: '报表字段' });
            }
            this.textOptions = res.data.textOptions.condition;
          }
          this.mathOperationOptions = res.data.conditionOptions.mathOptions;
          this.textOperationOptions = res.data.textOptions.mathOptions;
        }
      } catch (error) {
        console.error(error);
      }
    },
    // 设置默认
    setDefault(chartFilter) { // filterData:报表  filterItemData:系统
      // isSync 是否同步
      if (chartFilter && chartFilter.length) {
        const reportFilter = chartFilter[0].report || [];
        const systemFilter = chartFilter[0].system || [];
        const filter = JSON.parse(JSON.stringify([...reportFilter, ...systemFilter]));
        filter.forEach(i => {
          if (i.begin && i.end && i.begin !== '' && i.end !== '') {
            const start = String(i.begin).length === 10 ? i.begin * 1000 : i.begin;
            const end = String(i.end).length === 10 ? i.end * 1000 : i.end;
            i.timerange = [start, end];
          }
          // 如果为条件筛选
          if (i.type === 1 && i.value !== '') {
            try {
              i.conditionValue = JSON.parse(i.value);
            } catch (error) {
              i.conditionValue = '';
            }
          }
          if (i.top !== null) {
            this.currentTop = i.top;
          }
          this.conditionOptions.forEach(j => {
            if (i.field === j.name) {
              i.conditionChilderOptions = j.options;
            }
          });
          i.isOpenFilter = i.isOpenFilter || false;
          i.defaultMath = i.defaultMath || ''; // 默认筛选的运算条件
          i.defaultValue = i.defaultValue || '';
          i.defaultNumberRange = i.defaultNumberRange || [];
          i.defaultTimeRange = i.defaultTimeRange || [];
        });
        if (filter.length === 0) {
          this.filterList = [{
            top: null,
            timerange: [],
            numberRange: [],
            timeRangeType: '',
            type: '', // 0:时间筛选 1:条件筛选 2:文本筛选
            begin: '',
            monthOnMonth: false,
            yearOnYear: false,
            end: '',
            field: '',
            operation: '', // 操作，=,>,<,>=,<= 和 包含，不包含，首字
            value: '',
            conditionValue: '',
            isOpenFilter: false, // 是否开启筛选
            defaultMath: '', // 默认筛选的运算条件
            defaultValue: '', // 默认筛选条件
            defaultNumberRange: [], // 默认筛选条件
            defaultTimeRange: [] // 默认筛选条件
          }];
        } else {
          this.filterList = filter;
          this.filterListGroup = this.divideArr(this.filterList, 'top');
        }
      }
      this.filterList.forEach(i => {
        this.setYystemSecondcondition(i);
      });
    },
    syncData(oldFilterList) {
      const initData = {
        top: null,
        type: 0, // 0:时间筛选 1:条件筛选 2:文本筛选
        begin: '',
        end: '',
        field: '',
        optionsType: '',
        monthOnMonth: false,
        yearOnYear: false,
        operation: '', // 操作，=,>,<,>=,<= 和 包含，不包含，首字
        value: '',
        conditionValue: '',
        timeRangeType: '',
        isOpenFilter: false, // 是否开启筛选
        defaultMath: '', // 默认筛选的运算条件
        defaultValue: '', // 默认筛选条件
        defaultNumberRange: [], // 默认筛选条件
        defaultTimeRange: [] // 默认筛选条件
      };
      const len = oldFilterList.length - this.filterList.length;
      if (len > 0) {
        for (let i = 0; i < len; i++) {
          this.filterList.push(initData);
        }
      } else if (len < 0) {
        this.filterList.splice(oldFilterList.length, -len);
      }
      this.filterList.forEach((i, index) => {
        Object.assign(i, oldFilterList[index]);
      });
    },
    setYystemSecondcondition(item) {
      // 系统
      if (item.top !== 0) {
        const f = this.systemConditionOptions.condition.filter(i => i.id === item.top);
        if (f && f.length) this.$set(item, 'systemSecondcondition', f ? f[0].field : []);
      } else {
        this.$set(item, 'systemSecondcondition', []);
      }
    },
    /**
     * change 事件
     */
    switchFilter(item) {
      item.isOpenFilter = !item.isOpenFilter;
      this.timeRangeTypeChange(item);
    },
    // 选择报表或系统
    changeTop(item) {
      this.currentTop = '';
      this.filterList.some(i => {
        if (i.top !== null && i.top !== '') {
          this.currentTop = i.top;
          return true;
        }
      });
      this.setYystemSecondcondition(item);
      this.changeSelectType(item, true);
      this.initDefaultData(item);
    },
    // 报表的type改变 或者 系统的field改变
    changeSelectType(item, isTop = false) {
      // top 0:报表 1:系统
      try {
        if (item.top !== 0) {
          this.$set(item, 'type', '');
        }
        if (isTop || item.top === 0) {
          this.$set(item, 'field', '');
        }
        const isTime = this.isTimeField(item);
        if ((item.top === 0 && item.type === 0) || (item.top !== 0 && isTime)) {
          item.operation = '=';
        } else {
          item.operation = '';
        }
        item.value = '';
        item.begin = '';
        item.end = '';
        this.$set(item, 'timerange', []);
        this.$set(item, 'numberRange', []);
        this.$set(item, 'conditionValue', []);
        this.$set(item, 'yearOnYear', false);
        this.$set(item, 'monthOnMonth', false);
        this.$set(item, 'timeRangeType', '');
        // item.conditionValue = '';
        this.sendData();
      } catch (error) {
        console.log(error);
      }
    },
    // 系统字段改变
    changeField(item) {
      this.changeSelectType(item);
      this.initDefaultData(item);
      const curentField = item.systemSecondcondition.find(i => {
        return i.name === item.field;
      });
      if (curentField) {
        this.$set(item, 'optionsType', curentField.optionsType);
      }
    },
    // 时间类型改变：day:今日 week:本周 month:本月 year:本年，yesterday:昨日 lastweek:上周 lastmonth:上月 lastyear:去年
    timeRangeTypeChange(item) {
      const isOpenFilter = item.isOpenFilter && !item.timeRangeType && item.defaultMath;
      if (item.timeRangeType !== '' || isOpenFilter) {
        item.timerange = [];
        item.begin = '';
        item.end = '';
        item.monthOnMonth = true;
        item.yearOnYear = true;
      } else {
        item.monthOnMonth = false;
        item.yearOnYear = false;
      }
      const isTimeRangeType = item.timeRangeType === 'year' || item.timeRangeType === 'week' || item.timeRangeType === 'lastyear' || item.timeRangeType === 'lastweek';
      const isTimeRangeTypeDefault = item.defaultMath === 'year' || item.defaultMath === 'week' || item.defaultMath === 'lastyear' || item.defaultMath === 'lastweek';
      if (isTimeRangeType || (isOpenFilter && isTimeRangeTypeDefault)) {
        item.yearOnYear = false;
      }
      this.sendData(true);
    },
    // 时间区间改变
    timeChange(time, item) {
      if (time && time[0]) item.begin = String(time[0]).length === 13 ? Math.floor(time[0] / 1000) : time[0];
      if (time && time[1]) item.end = String(time[1]).length === 13 ? Math.floor(time[1] / 1000) : time[1];
      if (!time) {
        item.begin = '';
        item.end = '';
      }
      this.sendData(true);
    },
    // 条件筛选改变：只有报表有
    changeSelectCondition(name, item) {
      const conditionOptions = this.conditionOptions;
      conditionOptions.forEach(i => {
        if (i.name === name) {
          item.conditionChilderOptions = i.options;
        }
      });
      item.value = '';
      item.conditionValue = [];
      this.sendData();
    },
    /**
     * 操作
     */
    // 传数据给父组件
    sendData(notSync = false, isDelectIndex = null) {
      const filterListGroup = this.getParamsData();
      this.filterListGroup = filterListGroup;
      this.$emit('filterChange', filterListGroup);
      if (!notSync) this.$emit('filterGroupSync', { uuid: this.uuid, filterList: this.filterList });
      if (isDelectIndex || isDelectIndex === 0) {
        this.$emit('deleteEmit', { index: isDelectIndex, uuid: this.uuid });
      }
    },
    addItem() {
      const initData = {
        top: null,
        type: 0, // 0:时间筛选 1:条件筛选 2:文本筛选
        begin: '',
        end: '',
        field: '',
        optionsType: '',
        monthOnMonth: false,
        yearOnYear: false,
        operation: '', // 操作，=,>,<,>=,<= 和 包含，不包含，首字
        value: '',
        conditionValue: '',
        timeRangeType: '',
        reportField: '', // 【v2.8.9】报表字段（手动输入）,当选择的字段为报表字段时才生效
        isOpenFilter: false, // 是否开启筛选
        defaultMath: '', // 默认筛选的运算条件
        defaultValue: '', // 默认筛选条件
        defaultNumberRange: [], // 默认筛选条件
        defaultTimeRange: [] // 默认筛选条件
      };
      this.filterList.push(initData);
      this.$emit('filterGroupSync', { uuid: this.uuid, filterList: this.filterList });
    },
    deleteItem(index, noEmit = false) {
      this.filterList.splice(index, 1);
      if (!noEmit) this.sendData(true, index);
    },
    conditionValueChange(e, item) {
      item.value = JSON.stringify(item.conditionValue);
      this.sendData(true);
    },
    /**
     * 工具方法
     */
    // 同比环比文案
    contentFilter(type) {
      // day:今日 week:本周 month:本月 year:本年
      let contentObj = {};
      switch (type) {
        case 'yesterday':
        case 'day':
          contentObj = { month: '较前一日', year: '较上一周' };
          break;
        case 'lastweek':
        case 'week': contentObj = { month: '较前一周', year: '较上一月' }; break;
        case 'lastmonth':
        case 'month': contentObj = { month: '较前一月', year: '较上一年' }; break;
        case 'lastyear':
        case 'year': contentObj = { month: '较前一年', year: '' }; break;
      }
      return contentObj;
    },
    // 如果有多个筛选条件，只显示第一条环比/同比
    contrastSelectShow(item, index) {
      for (let i = 0; i < index; i++) {
        if (this.filterList[i] && this.filterList[i].timeRangeType && this.filterList[i].timeRangeType !== '' && this.isTimeField(this.filterList[i])) {
          item.yearOnYear = false;
          item.monthOnMonth = false;
          return false;
        }
      }
      return true;
    },
    // 分割数据
    divideArr(initialArr, key) {
      let originData = JSON.parse(JSON.stringify(initialArr));
      originData = originData.filter(i => {
        return i.top === 0 || i.top;
      });
      const dataArr = [];
      const dataItemArr = [];
      if (originData.length > 0) {
        originData.forEach(val => {
          if (val[`${key}`] && val[`${key}`] !== 0) {
            dataItemArr.push(val);
          } else {
            dataArr.push(val);
          }
        });
        return {
          system: dataItemArr,
          report: dataArr
        };
      }
      return {};
    },
    getParamsData() { // 参数处理（对外接口）
      const data = this.divideArr(this.filterList, 'top');
      const filterListGroup = JSON.parse(JSON.stringify(data));
      if (filterListGroup) {
        if (filterListGroup.system) {
          filterListGroup.system.forEach(item => {
            // optionsType  0:文本型 1:  时间日期  2: 数值型   3: 部门
            if (!item.defaultTimeRange) item.defaultTimeRange = [];
            if (item.optionsType || item.optionsType === 0) {
              item.optionsType = Number(item.optionsType);
            }
            if (item.operation === '' && item.begin !== '' && item.end !== '') {
              item.operation = '=';
            }
            if (item.optionsType === 2) {
              item.numberRange = this.handelNumber(item.numberRange);
              item.defaultNumberRange = this.handelNumber(item.defaultNumberRange);
            }
          });
        }
        if (filterListGroup.report) {
          filterListGroup.report.forEach(item => {
            if (!item.defaultTimeRange) item.defaultTimeRange = [];
            if (item.field !== '报表字段') {
              item.reportField = ''; // 选择的字段为报表字段时才生效
            }
            // 如果报表字段不是时间字段，需要清除相关参数
            if (!this.isTimeField({ field: item.reportField || '' })) {
              item.timerange = [];
              item.timeRangeType = '';
              item.begin = '';
              item.end = '';
            }
            if (item.operation === '' && item.begin !== '' && item.end !== '') {
              item.operation = '=';
            }
          });
        }
      }
      return filterListGroup;
    },
    handelNumber(arr) {
      if (!arr) {
        arr = [];
      } else if (arr && arr.length === 2) {
        for (let i = 0; i < arr.length; i++) {
          if (!arr[i] && arr[i] !== 0) arr[i] = null;
        }
        if (!arr[0] && arr[0] !== 0 && !arr[1] && arr[1] !== 0) {
          arr = [];
        }
      }
      return arr;
    }
  }
};
</script>
<style lang="scss" scoped>
.filter-list {
  & ::v-deep {
    .el-select {
      @media screen and (max-width: 1340px) {
        margin-right: 8px!important;
      }
      .el-select__tags {
        overflow: hidden;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .el-tag.el-tag--info {
        color: #406EFF;
        background-color: #ecf1ff;
      }
    }
    .filter-120 {
      margin-right: 10px;
      .el-input__inner {
        width: 120px !important;
        color: #606266;
        @media screen and (max-width: 1340px) {
          width: 100px !important;
        }
      }
    }
    .filter-80 {
      margin-right: 10px;
      .el-input__inner {
        width: 80px !important;
        color: #606266;
      }
    }
    .width70 {
      margin-right: 10px;
      .el-input__inner {
        width: 75px !important;
        color: #606266;
      }
    }
    .filter-160 {
      margin-right: 10px;
      width: 160px !important;
      .el-input__inner {
        width: 160px !important;
        color: #606266;
      }
    }
    .filter-170 {
      margin-right: 10px;
      width: 170px !important;
      .el-input__inner {
        width: 170px !important;
        color: #606266;
      }
    }
    .input-filter-100 {
      width: 100px !important;
      margin-right: 8px;
      .el-input__inner {
        width: 100px !important;
        color: #606266;
      }
    }
    .filter-180 {
      margin-right: 10px;
      width: 180px !important;
      .el-input__inner {
        width: 180px !important;
        color: #606266;
      }
    }
    .strong {
      .el-input__inner {
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color: #333;
      }
    }
    .type-time {
      width: 240px;
      margin-right: 10px;
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .filter-item {
    // display: flex;
    // align-items: center;
    margin-bottom: 16px;
    &:last-child {
      margin-bottom: 0;
    }
    .delete-btn {
      cursor: pointer;
      color: #192452;
      font-size: 14px;
    }
    .bold {
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      margin-left: 8px;
    }
  }
}
.contrast-title {
  font-size: 13px;
  color: #333;
}
.contrast-content {
  font-size: 13px;
  color: #406EFF;
}
// .time-month-year {
//   // transform: translateX(-135px);
//   margin-left: -135px;
// }
.paddingdiy {
  &::v-deep {
    .el-input__suffix {
      right: 0;
    }
    .el-input--suffix {
      .el-input__inner {
        padding-right: 20px !important;
      }
    }

  }
}
.filter-icon-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #333333;
  margin-right: 10px;
  font-size: 14px;
  height: 32px;
  .icon {
    font-size: 16px;
  }
  &.active {
    color: #406EFF;
  }
}
.default-filter-value {
  display: flex;
  // align-items: center;
  margin-top: 20px;
}
</style>
